<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>fabric-icons demo</title>
  <link rel="stylesheet" href="css/fabric-icons.css">
  <style>
  * {
    box-sizing: border-box;
  }

  html,
  body {
    padding: 0;
    margin: 0;
    color: #333333;
    font-family: "Segoe UI Regular WestEuropean", "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
  }

  body {
    padding: 0 20px;
  }

  .IconContainer {
    font-size: 14px;
    float: left;
    margin: 0 5px 5px 0;
    width: 50px;
    height: 50px;
    line-height: 51px;
  }

  .IconContainer-icon {
    text-align: center;
  }

  .IconContainer-name,
  .IconContainer-unicode {
    display: none;
  }
  </style>
</head>
<body>
  <h1 class="ms-font-su">fabric-icons</h1>

  <div class="Icons">
    
    <div class="IconContainer" title="GlobalNavButton - E700">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--GlobalNavButton"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        GlobalNavButton
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E700
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronDown - E70D">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronDown"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronDown
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E70D
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronUp - E70E">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronUp"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronUp
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E70E
      </div>
    </div>
    
    <div class="IconContainer" title="Cancel - E711">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--Cancel"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        Cancel
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E711
      </div>
    </div>
    
    <div class="IconContainer" title="Settings - E713">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--Settings"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        Settings
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E713
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronLeft - E76B">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronLeft"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronLeft
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E76B
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronRight - E76C">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronRight"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronRight
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E76C
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronUpSmall - E96D">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronUpSmall"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronUpSmall
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E96D
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronDownSmall - E96E">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronDownSmall"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronDownSmall
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E96E
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronLeftSmall - E96F">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronLeftSmall"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronLeftSmall
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E96F
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronRightSmall - E970">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronRightSmall"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronRightSmall
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E970
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronUpMed - E971">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronUpMed"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronUpMed
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E971
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronDownMed - E972">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronDownMed"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronDownMed
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E972
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronLeftMed - E973">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronLeftMed"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronLeftMed
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E973
      </div>
    </div>
    
    <div class="IconContainer" title="ChevronRightMed - E974">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--ChevronRightMed"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        ChevronRightMed
      </div>

      <div class="IconContainer-unicode ms-font-s">
        E974
      </div>
    </div>
    
    <div class="IconContainer" title="CircleRing - EA3A">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--CircleRing"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        CircleRing
      </div>

      <div class="IconContainer-unicode ms-font-s">
        EA3A
      </div>
    </div>
    
    <div class="IconContainer" title="FabricReportLibrary - F0A1">
      <div class="IconContainer-icon">
        <i class="ms-Icon ms-Icon--FabricReportLibrary"></i>
      </div>

      <div class="IconContainer-name ms-font-l">
        FabricReportLibrary
      </div>

      <div class="IconContainer-unicode ms-font-s">
        F0A1
      </div>
    </div>
  </div>
</body>
</html>